<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div v-if="!changed" class="msgBox">
        <div class="leftBox">
          <el-card class="leftCard">
            <div class="xian"></div>
            <div class="msg">
              <div class="box1">
                <ul class="card__content-list">
                  <li class="card__content-item">
                    <span class="card__content-item-label">姓名:</span>
                    <span class="card__content-item-value">{{
                      datas.name
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">性别:</span>
                    <span class="card__content-item-value">{{
                      formatterDict(datas.sex, 'sexOptions')
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">年龄:</span>
                    <span class="card__content-item-value">{{
                      datas.age == 0 ? '/' : datas.age
                    }}</span>
                  </li>
                </ul>
                <div class="avatar">
                  <avatar-image
                    style="height: 100%; width: 100%"
                    :patient="datas"
                  />
                </div>
              </div>
              <div class="box2">
                <ul class="card__content-list">
                  <li class="card__content-item">
                    <span class="card__content-item-label">预约号:</span>
                    <span class="card__content-item-value">{{
                      datas.reservationNumber ? datas.reservationNumber : '/'
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">电话:</span>
                    <!-- <span class="card__content-item-value">
                      
                    </span> -->
                    <span class="card__content-item-value"
                      >{{ datas.phoneNumber }} &nbsp;&nbsp;&nbsp;
                      <el-tag type="danger" size="mini">
                        {{
                          formatterDict(
                            datas.phoneOwnership,
                            'phoneOwnershipOptions'
                          )
                        }}</el-tag
                      >
                      &nbsp;&nbsp;&nbsp;
                      <el-tag
                        v-if="showBtn"
                        type="success"
                        size="mini"
                        style="cursor: pointer"
                        @click="checkPhone()"
                      >
                        查看电话
                      </el-tag>
                    </span>
                  </li>
                  <!-- <li class="card__content-item">
                    <span class="card__content-item-label">电话使用人:</span>
                    
                  </li> -->
                  <li class="card__content-item">
                    <span class="card__content-item-label">访问病种:</span>
                    <span style="color: #f76359; margin-left: 20px">{{
                      datas.visitDisease
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">预约时间:</span>
                    <span class="card__content-item-value">{{
                      datas.reservationTime
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">预约门诊:</span>
                    <span class="card__content-item-value">{{
                      filterClinic(datas.reservationClinic)
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">关键词:</span>
                    <span class="card__content-item-value">{{
                      datas.keyword ? datas.keyword : '/'
                    }}</span>
                  </li>
                </ul>
              </div>
              <div class="box3">
                <ul class="card__content-list">
                  <li class="card__content-item">
                    <span class="card__content-item-label">QQ号:</span>
                    <span class="card__content-item-value">{{
                      datas.qqNumber ? datas.qqNumber : '/'
                    }}</span>
                  </li>
                  <li class="card__content-item">
                    <span class="card__content-item-label">微信号:</span>
                    <span class="card__content-item-value">{{
                      datas.wechatNumber ? datas.wechatNumber : '/'
                    }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
        <div class="rightBox">
          <el-card class="rCard" style="min-height: 292px; padding-top: 20px">
            <div class="xian"></div>
            <div class="rbox1">
              <ul class="card__content-list">
                <li class="card__content-item">
                  <span class="card__content-item-label">建档时间:</span>
                  <span class="card__content-item-value">{{
                    datas.filingTime
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">渠道一:</span>
                  <span class="card__content-item-value">{{
                    datas.channelFirst == '-1' ? '直接上门' : datas.channelFirst
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">媒介一:</span>
                  <span class="card__content-item-value">{{
                    datas.channelFirst == '-1' ? '直接上门' : datas.channelFirst
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">性格:</span>
                  <span class="card__content-item-value">{{
                    formatterDict(datas.personality, 'characterOptions')
                      ? formatterDict(datas.personality, 'characterOptions')
                      : '/'
                  }}</span>
                </li>

                <li class="card__content-item">
                  <span class="card__content-item-label">是否大单:</span>
                  <span class="card__content-item-value">{{
                    datas.isBigContract == 0
                      ? '/'
                      : formatterDict(datas.isBigContract, 'yesOrNo')
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">障碍点:</span>
                  <span class="card__content-item-value">{{
                    datas.obstacle ? datas.obstacle : '/'
                  }}</span>
                </li>
              </ul>
              <ul class="card__content-list">
                <li class="card__content-item">
                  <span class="card__content-item-label">建档人:</span>
                  <span class="card__content-item-value">{{
                    datas.filingPerson ? datas.filingPerson : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">渠道二:</span>
                  <span class="card__content-item-value">{{
                    datas.channelSecond ? datas.channelSecond : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">媒介二:</span>
                  <span class="card__content-item-value">{{
                    datas.channelSecond ? datas.channelSecond : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">职业:</span>
                  <span class="card__content-item-value">{{
                    formatterDict(datas.profession, 'professionalOptions')
                      ? formatterDict(datas.profession, 'professionalOptions')
                      : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">经济能力:</span>
                  <span class="card__content-item-value">{{
                    formatterDict(datas.economics, 'economicAbilityOptions')
                      ? formatterDict(datas.economics, 'economicAbilityOptions')
                      : '/'
                  }}</span>
                </li>
              </ul>
              <ul class="card__content-list">
                <li class="card__content-item">
                  <span class="card__content-item-label">跟进人:</span>
                  <span class="card__content-item-value">{{
                    datas.followPerson ? datas.followPerson : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">渠道三:</span>
                  <span class="card__content-item-value">{{
                    datas.channelThird ? datas.channelThird : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">媒介三:</span>
                  <span class="card__content-item-value">{{
                    datas.channelThird ? datas.channelThird : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">消费习惯:</span>
                  <span class="card__content-item-value">{{
                    formatterDict(
                      datas.consumptionCustom,
                      'spendingHabitsOptions'
                    )
                      ? formatterDict(
                          datas.consumptionCustom,
                          'spendingHabitsOptions'
                        )
                      : '/'
                  }}</span>
                </li>
                <li class="card__content-item">
                  <span class="card__content-item-label">部门:</span>
                  <span class="card__content-item-value">{{
                    datas.channelFirst == '-1' ? '直接上门' : datas.channelFirst
                  }}</span>
                </li>
              </ul>
            </div>
          </el-card>
          <el-card class="rCard2" style="min-height: 110px">
            <div class="xian"></div>
            <div class="rbox2">
              <ul class="card__content-list">
                <li class="card__content-item">
                  <span
                    style="color: #f76359; marginleft: 20px; fontsize: 16px"
                    >{{ datas.details }}</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
          <el-card class="rCard3" style="min-height: 110px">
            <div class="xian"></div>
            <div class="rbox3">
              <ul class="card__content-list">
                <li class="card__content-item">
                  <span
                    class="card__content-item-value"
                    :class="{ noHave: datas.record ? false : true }"
                    >{{
                      datas.record ? datas.record : '目前暂无聊天记录哟~'
                    }}</span
                  >
                </li>
              </ul>
            </div>
          </el-card>
        </div>
      </div>

      <div v-else>
        <el-tabs>
          <el-row>
            <el-col :span="4.8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input
                  v-model="form.phoneNumber"
                  placeholder="请输入手机号"
                  readonly
                />
              </el-form-item>
              <!-- <el-form-item label="手机号2" prop="phoneNumber2">
                <el-input
                  v-model="form.phoneNumber2"
                  placeholder="请输入手机号2"
                  readonly
                />
              </el-form-item> -->
            </el-col>
            <el-col :span="2">
              <el-form-item
                prop="phoneOwnership"
                :style="{ marginLeft: '10px' }"
                class="elFromItem"
              >
                <el-col :span="24">
                  <el-select
                    v-model="form.phoneOwnership"
                    :style="{ width: '80%' }"
                    placeholder="使用人"
                  >
                    <el-option
                      v-for="dict in phoneOwnershipOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    />
                  </el-select>
                </el-col>
              </el-form-item>
              <!-- <el-form-item
                prop="phoneOwnership2"
                :style="{ marginLeft: '10px' }"
                class="elFromItem"
              >
                <el-col :span="24">
                  <el-select
                    v-model="form.phoneOwnership2"
                    :style="{ width: '80%' }"
                    placeholder="使用人"
                  >
                    <el-option
                      v-for="dict in phoneOwnershipOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    />
                  </el-select>
                </el-col>
              </el-form-item> -->
            </el-col>
            <el-col :span="3">
              <el-form-item label="状态" prop="callBackState">
                <el-select
                  v-model="form.callBackState"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="dict in marketStatusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                  <el-radio
                    v-for="dict in sexOptions"
                    :key="dict.dictValue"
                    :label="parseInt(dict.dictValue)"
                    >{{ dict.dictLabel }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tabs>
        <el-tabs>
          <el-tab-pane label="项目信息">
            <el-row>
              <el-col :span="4">
                <el-form-item label="多级渠道" prop="channel">
                  <el-cascader
                    v-model="form.channel"
                    disabled
                    placeholder="请选择渠道"
                    :options="marketChannelList"
                  />
                </el-form-item>
                <el-form-item label="预约医生" prop="reservationDoctor">
                  <el-input
                    v-model="form.reservationDoctor"
                    placeholder="请输入预约医生"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="访问病种" prop="projectOptions">
                  <el-cascader
                    v-model="form.projectOptions"
                    separator="-"
                    placeholder="请选择访问病种"
                    :options="projectOptions"
                  />
                </el-form-item>
                <el-form-item label="微信号" prop="wechatNumber">
                  <el-input
                    v-model="form.wechatNumber"
                    placeholder="请输入微信号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="预约门诊" prop="reservationClinic">
                  <el-cascader
                    v-model="form.reservationClinic"
                    expand-trigger="hover"
                    :show-all-levels="false"
                    placeholder="请选择门诊"
                    :options="clinicOptions"
                    @change="DeptId"
                  />
                </el-form-item>
                <el-form-item label="其他联系" prop="otherWay">
                  <el-input
                    v-model="form.otherWay"
                    placeholder="请输入其他联系"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="预约时间" prop="reservationTime">
                  <el-date-picker
                    v-model="form.reservationTime"
                    type="datetime"
                    placeholder="选择预约时间"
                    size="small"
                    style="width: 200px"
                    align="right"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="form.address" placeholder="请输入地址" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="qq号" prop="qqNumber">
                  <el-input v-model="form.qqNumber" placeholder="请输入qq号" />
                </el-form-item>
                <el-form-item label="预约tc" prop="reservationTc">
                  <el-input
                    v-model="form.reservationTc"
                    placeholder="请输入预约tc"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="障碍点" prop="obstacle">
                  <el-input
                    v-model="form.obstacle"
                    placeholder="请输入障碍点"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-tabs>
          <el-tab-pane label="其他信息">
            <el-row>
              <el-col :span="10">
                <el-form-item label="客户详情" prop="details">
                  <el-input
                    v-model="form.details"
                    type="textarea"
                    placeholder="请输入内容"
                  /> </el-form-item
              ></el-col>
              <el-col :span="10">
                <el-form-item label="聊天记录" prop="record">
                  <el-input
                    v-model="form.record"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-tabs>
          <el-tab-pane label="补充信息">
            <el-row>
              <el-col :span="6">
                <el-form-item label="多级媒介" prop="channelFirst">
                  <el-cascader
                    v-model="form.channel"
                    placeholder="多级媒介"
                    disabled
                    :options="marketChannelList"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职业">
                  <el-select v-model="form.profession" placeholder="请选择职业">
                    <el-option
                      v-for="dict in professionalOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="消费习惯">
                  <el-select
                    v-model="form.consumptionCustom"
                    placeholder="请选择消费习惯"
                  >
                    <el-option
                      v-for="dict in spendingHabitsOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="经济能力">
                  <el-select
                    v-model="form.economics"
                    placeholder="请选择经济能力"
                  >
                    <el-option
                      v-for="dict in economicAbilityOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="是否大单">
                  <el-select
                    v-model="form.isBigContract"
                    placeholder="请选择是否大单"
                  >
                    <el-option
                      v-for="dict in yesOrNo"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="有无小孩">
                  <el-select
                    v-model="form.haveChild"
                    placeholder="请选择有无小孩"
                  >
                    <el-option
                      v-for="dict in haveChildOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="婚姻状况">
                  <el-select
                    v-model="form.maritalStatus"
                    placeholder="请选择婚姻状况"
                  >
                    <el-option
                      v-for="dict in maritalStatusOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性格">
                  <el-select
                    v-model="form.personality"
                    placeholder="请选择性格"
                  >
                    <el-option
                      v-for="dict in characterOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item
            size="large"
            class="elFromItem"
            style="margin-top: 32px; margin-bottom: 0px"
          >
            <el-button
              v-if="!changed"
              type="primary"
              class="pan-btn blue-btn"
              @click="resetForm"
              >修改</el-button
            >
            <el-button
              v-else
              type="primary"
              class="pan-btn blue-btn"
              @click="submitForm"
              >提交</el-button
            >
            <el-button
              v-if="!changed"
              type="warning"
              class="pan-btn yellow-btn"
              @click="ChannelChanges"
              >发起渠道修改</el-button
            >
            <el-button v-if="changed" plain @click="close">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <channel-tabel
      :open="open"
      :datas="datas"
      :channel-options="marketChannelList"
      @turnoff="turnoff"
    ></channel-tabel>
  </div>
</template>
<script>
import { updateReservation, getReservation } from '@/api/erp/reservation'
import ChannelTabel from './ChannelTabel'
import { decode } from '@/utils/utils'
import { mapGetters } from 'vuex'
import { getPhone } from '@/api/erp/common'
import { getTreeProject } from '@/common/datas'

export default {
  name: 'PatientInformation',
  components: {
    ChannelTabel,
    AvatarImage: () => import('@/components/yiya/avatarImage'),
  },
  // eslint-disable-next-line vue/require-prop-types
  props: {
    userMessage: {
      type: Object,
      default: () => {},
    },
    cut: {
      type: Boolean,
      default: false,
    },
    patient: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '明天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周后',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000 // 返回 所有时间 大于 当前时间
        },
      },
      //对话框
      open: false,
      //查看电话
      showBtn: true,
      //修改信息
      changed: false,
      //表单数据
      form: this.userMessage,
      datas: {},
      // 门诊
      clinicOptions: JSON.parse(localStorage.getItem('clinicLists'))[0]
        .children,
      clinicArray: JSON.parse(localStorage.getItem('ClinicListArray')),
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        phonenumber: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^[0-1]\d{10}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        phoneOwnership: [
          { required: true, message: '电话所属关系不能为空', trigger: 'blur' },
        ],
        callBackState: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
        ],
        visitDisease: [
          { required: true, message: '访问病种不能为空', trigger: 'blur' },
        ],
        reservationClinic: [
          { required: true, message: '预约门诊不能为空', trigger: 'blur' },
        ],
        reservationTime: [
          { required: true, message: '预约时间不能为空', trigger: 'blur' },
        ],
        channel: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
        details: [
          { required: true, message: '客户详情不能为空', trigger: 'blur' },
        ],
        phoneOwnership: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapGetters('dict', [
      'sexOptions',
      'phoneOwnershipOptions',
      'marketStatusOptions',
      'professionalOptions',
      'spendingHabitsOptions',
      'economicAbilityOptions',
      'yesOrNo',
      'haveChildOptions',
      'maritalStatusOptions',
      'characterOptions',
      'callBackStateOptions',
      'reachStatusOptions',
    ]),
    ...mapGetters('market', ['marketChannelList']),
    projectOptions: () => getTreeProject(),
  },
  watch: {
    userMessage: function (newVal) {
      this.form = newVal //newVal即是chartData
    },
    cut: function (newVal) {
      if (newVal) {
        if (this.changed) {
          this.close()
        }
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.getUser(this.userMessage.id)
    }, 300)
    this.formStatus()
  },
  methods: {
    async phone(params) {
      const { data } = await getPhone(params)
      return data
    },
    checkPhone() {
      this.$confirm(
        '确认要查看"' + this.datas.name + '"的联系方式吗?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          let params = {
            id: this.datas.id,
            type: 0,
          }
          return this.phone(params)
        })
        .then((res) => {
          this.datas.phoneNumber = res.phoneNumber1
          this.showBtn = false
          this.msgSuccess('成功')
        })
        .catch(function () {
          return
        })
    },
    filterClinic(id) {
      if (this.clinicArray.length == 0) {
        return
      }
      const item = this.clinicArray.filter((item) => {
        if (id == item.deptId) {
          return item
        }
      })
      if (item[0] == undefined) {
        return ''
      } else {
        return item[0].deptName
      }
    },
    formStatus() {
      if (!this.form.isBigContract) {
        this.form.isBigContract = undefined
      }
      if (!this.form.haveChild) {
        this.form.haveChild = undefined
      }
      if (!this.form.maritalStatus) {
        this.form.maritalStatus = undefined
      }
      // if (this.form.phoneNumber2 == 0) {
      //   this.form.phoneNumber2 = undefined
      //   this.form.phoneOwnership2 = undefined
      // }
    },
    async getUser(ids) {
      await getReservation(ids).then((res) => {
        this.datas = res.data
        this.datas.channel = [
          res.data.channelFirst,
          res.data.channelSecond,
          res.data.channelThird,
        ]
        this.datas.projectOptions = res.data.visitDisease.split('-')
      })
    },
    //选择门诊
    DeptId(e) {
      this.form.reservationClinic = e[1]
    },
    //渠道修改取消
    turnoff(e) {
      this.open = e
    },
    //点击发起渠道修改
    ChannelChanges() {
      this.open = true
    },
    //返回上一页
    close() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form = this.datas
        }
      })
      this.changed = false
    },
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.reservationTime = this.parseTime(
            this.form.reservationTime,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          ;[
            this.form.channelFirst,
            this.form.channelSecond,
            this.form.channelThird,
          ] = this.form.channel
          this.form.phoneNumber = undefined
          this.form.visitDisease = this.form.projectOptions.join('-')
          this.staticAvatar()
          if (this.form.id != undefined) {
            updateReservation(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                const redirect = decode(this.$route.query.redirect)
                this.$router.push(redirect)
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    staticAvatar() {
      if (this.form.sex == 0) {
        if (this.form.age == 0) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
        } else if (this.form.age < 18) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
        } else if (this.form.age > 50) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
        } else {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
        }
      } else if (this.form.sex == 1) {
        if (this.form.age == 0) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
        } else if (this.form.age < 18) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
        } else if (this.form.age > 50) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
        } else {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
        }
      } else {
        if (this.form.age == 0) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
        } else if (this.form.age < 18) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/girl.jpg'
        } else if (this.form.age > 50) {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/nanna.jpg'
        } else {
          this.form.imageUrl =
            'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
        }
      }
    },
    resetForm() {
      this.formStatus()
      this.changed = true
    },
  },
}
</script>

<style lang="scss" scoped>
.elFromItem >>> .el-form-item__content {
  margin: 0 !important;
}
.card__content-list {
  padding-left: 0;

  .card__content-item {
    margin: 10px;
    padding-left: 0;
    display: flex;

    .card__content-item-label {
      font-size: 16px;
      color: #2d405e;
      font-weight: 700;
      min-width: 86px;
      display: inline-block;
      text-align: right;
    }
    .card__content-item-value {
      font-size: 16px;
      color: #798fb1;
      margin-left: 20px;
    }
  }
}
.msgBox {
  display: flex;
  justify-content: space-between;
  .leftBox {
    height: 100%;
    width: 38%;
    .leftCard {
      min-height: 538px;
      position: relative;
      border-top: 2px solid #0755c2;
      .xian {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        width: 80px;
        background-color: #0755c2;
      }
      .msg {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        .box1 {
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .avatar {
            display: flex;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 22px;
            img {
              height: 100%;
              width: 100%;
              border-radius: 50%;
              flex-shrink: 0;
            }
          }
        }
        .box2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 2px solid #ccc;
        }
        .box3 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 2px solid #ccc;
        }
      }
    }
  }
  .rightBox {
    display: flex;
    flex-direction: column;
    width: 60%;
    .rCard {
      position: relative;
      border-top: 2px solid #0755c2;
      .xian {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        width: 80px;
        background-color: #0755c2;
      }
      .rbox1 {
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
      }
    }
    .rCard2 {
      margin-top: 14px;
      position: relative;
      border-top: 2px solid #f76359;
      .xian {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        width: 80px;
        background-color: #f76359;
      }
    }
    .rCard3 {
      margin-top: 14px;
      position: relative;
      border-top: 2px solid #0755c2;
      .xian {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        width: 80px;
        background-color: #0755c2;
      }
    }
  }
}
.noHave {
  font-size: 16px;
  margin-left: 20px;
  color: #ccc !important;
}
</style>
